<template>
     <n-divider>keep-alive页面缓存</n-divider>
     <h2 style="color:brown">
        <p>多用于列表页面，比如在一个分页搜索中，在第二页进入了详情页，退回的时候希望仍然搜索页停留在第二页，这时候就需要吧搜索页缓存</p>
        <p>注意缓存的是组件名,匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配</p>
        <p>include - string | RegExp | Array。只有名称匹配的组件会被缓存。</p>
        <p>exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。</p>
        <p>max - number | string。最多可以缓存多少组件实例。</p>
    </h2>
     <div class="flex-b">
          <div>
              父组件, count：{{count}}
              <div>修改过后，去其他页面在回来看，count技术值还保留原样</div>
          </div>
          <n-divider style="width:200px"  >分割线</n-divider>
          <div>
               <Children v-model:count="count"></Children>
          </div>
     </div>
</template>


<script lang="ts">
// 给组件命名，用于 <keep-alive> 标签 指定缓存该页面 
// 去App.vue 缓存页面
export default { name: 'keepalive' };
</script>
<script setup lang='ts'>
import { ref } from "@vue/reactivity";
import Children from './Children.vue'
const count = ref(0)
</script>
    
<style scoped>
.flex-b{
     display: flex;
     justify-content: center;
}
</style>